<!DOCTYPE html>
<html>
<title>HTML5-only and WebGL Jmol Demo</title>
<head>
<script type="text/javascript" src="JSmoljQuery.js"></script>
<script type="text/javascript" src="JSmolCore.js"></script>
<script type="text/javascript" src="JSmolApplet.js"></script>
<script type="text/javascript" src="JSmolApi.js"></script>
<script type="text/javascript" src="j2s/j2sjmol.js"></script>
<script type="text/javascript" src="JSmol.js"></script>
<!-- // following two only necessary for WebGL version: -->
<script type="text/javascript" src="JSmolThree.js"></script>
<script type="text/javascript" src="JSmolGLmol.js"></script>

<script type="text/javascript">



// Developers: The debugCode flag is checked in j2s/java/core.z.js, 
// and, if TRUE, skips loading the core methods, forcing those
// to be read from their individual directories. Set this
// true if you want to do some code debugging by inserting
// System.out.println, document.title, or alert commands
// anywhere in the Java or Jmol code.

//Jmol.debugCode = true;


var jmolApplet0; // set up in HTML table, below

// logic is set by indicating order of USE -- default is HTML5 for this test page, though
var use = "JAVA HTML5 IMAGE" // WEBGL only by request by link below.
var s = document.location.href;
//if (s.indexOf("?") < 0) s = "USE=HTML5"

if (s.indexOf("USE=") >= 0)
  use = s.split("USE=")[1].split("&")[0]
else if (s.indexOf("JAVA") >= 0)
  use = "JAVA"
else if (s.indexOf("IMAGE") >= 0)
  use = "IMAGE"
else if (s.indexOf("NOWEBGL") >= 0)
  use = "JAVA IMAGE"
else if (s.indexOf("WEBGL") >= 0)
  use = "WEBGL HTML5"
if (s.indexOf("NOWEBGL") >= 0)
  use = use.replace(/WEBGL/,"")
var useSignedApplet = (s.indexOf("SIGNED") >= 0);

jmol_isReady = function(applet) {
	document.title = (applet._id + " is ready")
	Jmol._getElement(applet, "appletdiv").style.border="1px solid blue"
}		
$$Date=Date

var Info = {
	width: 300,
	height: 300,
	debug: false,
	color: "white",
	addSelectionOptions: true,
	serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php",
	use: use,
	jarPath: "..",
	j2sPath: "j2s",
	jarFile: (useSignedApplet ? "JmolAppletSigned.jar" : "JmolApplet.jar"),
	isSigned: useSignedApplet,
	disableJ2SLoadMonitor: true,
	disableInitialConsole: true,
	readyFunction: jmol_isReady,
	//defaultModel: "$dopamine",
	//console: "none", // default will be jmolApplet0_infodiv
	script: "set antialiasDisplay;background white;load caffeine.mol;"
  //delay 3;background yellow;delay 0.1;background white;for (var i = 0; i < 10; i+=1){rotate y 3;delay 0.01}"
}
</script>
</head>
<body>
<table width=1000 cellpadding=10>
<tr><td colspan=2 style="font-size:8pt">
For a zip file containing all the files in this directory, 
see <a href=http://chemapps.stolaf.edu/jmol/jsmol.zip>http://chemapps.stolaf.edu/jmol/jsmol.zip</a>. 

This page can use the signed Jmol applet, the unsigned Jmol applet
with server-side help, or <a href="jsmol.sourceforge.net">JSmol</a> 
using HTML5 with or without WebGL. It is under active development at this time. 
Credits: 
GLmol interface written by <b>Takanori Nakane</b>. 
Java2Script written by <b>Zhou Renjian, et al.</b>
Jzlib written by <b>Atsuhiko Yamanaka</b>.
Jmol code conversion to JavaScript by <b>Bob Hanson</b>. 

</td></tr>
<tr><td>

<script>

// note that the variable name MUST match the first parameter in quotes

jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)

// note that now scripts can be sent immediately after the _Applet object is created

//Jmol.script(jmolApplet0,"background gray;delay 0.5;background black")
var lastPrompt=0;
</script>

<br>
<a href="javascript:Jmol.script(jmolApplet0,lastPrompt=prompt('command?',lastPrompt ? lastPrompt : 'color cpk'))">cmd</a>
display
<a href="javascript:Jmol.script(jmolApplet0,'set antialiasDisplay false')">faster</a>
<a href="javascript:Jmol.script(jmolApplet0,'set antialiasDisplay true')">sharper</a>
info <a href="javascript:Jmol.showInfo(jmolApplet0, true)">show</a>
<a href="javascript:Jmol.clearConsole(jmolApplet0)">clear</a>
<a href="javascript:Jmol.showInfo(jmolApplet0, false)">hide</a>

<br><a href="javascript:Jmol.script(jmolApplet0,'select *;cartoons off;spacefill only')">spacefill</a>
<a href="javascript:Jmol.script(jmolApplet0,'select *;cartoons off;wireframe -0.1')">wire</a>
<a href="javascript:Jmol.script(jmolApplet0,'select *;cartoons off;spacefill 23%;wireframe 0.15')">ball&stick</a>
<a href="javascript:Jmol.script(jmolApplet0,'select protein or nucleic;cartoons only')">cartoons</a>
<a href="javascript:Jmol.script(jmolApplet0,'set cartoonFancy true')">fancy</a>
<a href="javascript:Jmol.script(jmolApplet0,'set cartoonFancy false')">not</a>
<a href="javascript:Jmol.script(jmolApplet0,'set cartoonFancy false;set hermitelevel 0')">flat</a>

<br><a href="javascript:Jmol.script(jmolApplet0,'color property atomno')">color atomno</a>
<a href="javascript:Jmol.script(jmolApplet0,'color cpk')">color cpk</a>
<a href="javascript:Jmol.script(jmolApplet0,'color structure')">color structure</a>
<br>
<a href="javascript:Jmol.script(jmolApplet0,'select *;isosurface vdw')">isosurface vdw</a>
<a href="javascript:Jmol.script(jmolApplet0,'isosurface delete')">off</a>
<a href="javascript:Jmol.script(jmolApplet0,'if ({atomno < 10}.partialcharge == 0){calculate partialcharge};isosurface vdw map mep')">mep</a>
<a href="javascript:Jmol.script(jmolApplet0,'isosurface translucent')">translucent</a>
<a href="javascript:Jmol.script(jmolApplet0,'isosurface opaque')">opaque</a>


<br>
labels <a href="javascript:Jmol.script(jmolApplet0,'if (_fileType == &quot;Pdb&quot;){select *.CA;label %n%r}else{select *;label %a};select *;')">on</a>
<a href="javascript:Jmol.script(jmolApplet0,'select *;labels off')">off</a>
<a href="javascript:Jmol.script(jmolApplet0,'font echo 20 serif;fsize=20;set echo top center;echo echo test')">echo</a>
<a href="javascript:Jmol.script(jmolApplet0,'if (!fsize){fsize=20};fsize += 4;font echo @fsize serif;')">larger</a>
<a href="javascript:Jmol.script(jmolApplet0,'if (!fsize){fsize=20};fsize -= 4;if (fsize < 10){fsize = 10};font echo @fsize serif')">smaller</a>

</td><td valign=top>
<b>Try various buttons. If anything doesn't work please <a href=mailto:hansonr@stolaf.edu>let me know</a>.</b> 
<br /><br /> 

<span style="font-size:8pt">
Current status: 12/8/12 - 
<b>Jmol is working completely Java-free, requiring only HTML5.</b>
Script queuing, animation, spin, vibration, move, moveto, hover, and (guided) navigation, pause/resume are all working;
echos/labels working; antialiasDisplay working;
synchronous binary and XML file reading working; 
cartoons, translucency, surfaces -- all are working in a simple HTML5 2D canvas. WebGL is less developed. We are very interested in 
developing the WebGL option further, as the rendering is faster, but to date it is somewhat limited, with just basic shapes and no text. 

Enter &gt; and a command into the search box and press ENTER to execute a <a target=_blank href=http://chemapps.stolaf.edu/jmol/docs>script command</a>.
   </span>
<br /><br /> 
<table cellpadding=5><tr><td valign=top>
<b>rendering options:</b> 
	 <br /> 
  <a href=test2.htm?USE=JAVA>unsigned Jmol applet</a> 
 <br /> 
<a href=test2.htm?SIGNED>signed Jmol applet</a>
 <br /> 
<a href=test2.htm?USE=HTML5>JSmol (HTML5 only)</a> 
 <br /> 
 <a href=test2.htm?WEBGL>JSmol (WebGL)</a> 
 <br /> 
 <a href=test2.htm?IMAGE>image only</a>
 <br />
 <br />
	<b>keyword searches</b>
 <br />
 <a href="javascript:Jmol.search(jmolApplet0,'=caffeine?')">=caffeine? (RCSB)</a>
 <br />
 <a href="javascript:Jmol.search(jmolApplet0,'=1blu?')">=1blu? (RCSB)</a>
 <br />
 <a href="javascript:Jmol.search(jmolApplet0,'=1crn?')">=1crn? (RCSB)</a>
</td><td valign=top>
	<b>this-domain calls</b>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load estron.cml;display molecule=1;moveto /* time, axisAngle */ 0.0 { -569 -266 778 170.22} /* zoom, translation */ 210.8 0.0 0.0 /* center, rotationRadius */ {1.612277686904762 3.7877332476190473 1.6109263519047616} 16.399569513870535 /* navigation center, translation, depth */ {0 0 0} 9.485930041021248 -20.361702729557265 0;')">estron.cml</a>
 <a href="javascript:Jmol.script(jmolApplet0,'load vasp.xml')">vasp.xml</a>
 <a href="javascript:Jmol.script(jmolApplet0,'load water.xodydata')">water.xodydata</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'script test.spt;background black')">thread test</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'pause')">pause</a>
 <a href="javascript:Jmol.script(jmolApplet0,'resume')">resume</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'!quit')">!quit</a>
 <a href="javascript:Jmol.script(jmolApplet0,'!exit')">!exit</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load caffeine.mol;if (random() > 0.3){moveto 1 left}else if (random() > 0.7) {moveto 1 right} else {moveto 1 top};background black;delay 0.1;background white')">moveto</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load caffeine.mol;set echo top center;delay 1.0;echo caffeine;delay 1.0;set selectionhalos on;select _O;echo oxygen;delay 1.0;select _N;echo nitrogen;delay 1.0; select none;echo hover over an atom')">delay/hover</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'var x=antialiasDisplay;load cyclohexaneFlip.jmol;antialiasdisplay = x;animation mode palindrome;animation on')">animation</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load c6h6.smol -3;rotate x 30;spin on;vibration on')">spin/vibration</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load co2.smol;mo homo SQUARED')">mo homo SQUARED</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load co2.smol;mo DENSITY')">mo DENSITY (slow)</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load 1hxw.png')">load 1hxw.png</a> (<a target=_blank href=1hxw.png>image</a>)
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load square_planar.spartan')">load square_planar.spartan</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'load water.xyz.gz')">load water.xyz.gz</a>
 <br />
 <a href="javascript:Jmol.script(jmolApplet0,'zap;pmesh &quot;sage.pmesh&quot fullylit;')">pmesh "sage.pmesh"</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'caffeine.mol')">load caffeine.mol</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'caffeine.mol',';isosurface &quot;caffeine.jvxl&quot;')">isosurface "caffeine.jvxl"</a>
 <br />
 <a href="javascript:Jmol.loadFile(jmolApplet0,'1crn.pdb',';if (_is2D) {set hermitelevel 0} else {set hermitelevel 6;set ribbonAspectRatio 4};cartoons only;color structure;')">load 1crn.pdb</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'k04041.cif','{1 1 1}')">load k04041.cif {1 1 1}</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'cl2o.gamess')">load cl2o.gamess</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'cl2o.gamess',';model 1.2;if (_is2D){mo mesh nofill} else {mo fill nomesh};mo homo')">(load +) mo homo</a>
 <br /> 
 <a href="javascript:Jmol.script(jmolApplet0,'model 1.2;mo fill nomesh;	mo lumo')">mo lumo</a>
 <a href="javascript:Jmol.script(jmolApplet0,'mo mesh nofill')">mesh</a>
 <a href="javascript:Jmol.script(jmolApplet0,'mo fill nomesh')">fill</a>
 <br /> 
 <br /> 

 </td><td valign=top>
	<b>direct database calls(<a href="javascript:alert('MSIE cannot do synchronous cross-domain file transfer, so if you want to do that, you must put jsmol.php on your OWN server and point to it using Info.serverURL, which for this page is ' + Info.serverURL + '\nA text version of this php file is at http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php.txt')">unless MSIE</a>)</b>
 <br />
 <a href="javascript:Jmol.loadFile(jmolApplet0,'$caffeine')">load $caffeine (from NCI)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'=1blu',';display not water;select protein or nucleic;cartoons only;color structure;select *')">load =1blu (from RCSB)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'=1d66',';display not water;select protein or nucleic;cartoons only;color structure;select *')">load =1d66 (from RCSB)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'=4tra',';display not water;select protein or nucleic;cartoons only;color structure;select *')">load =4tra (from RCSB)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,':1983')">load :1983 (PubChem CID)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,':aspirin')">load :aspirin (PubChem name)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,':smiles:CC/C=C/CC')">load :smiles:CC/C=C/CC (PubChem SMILES)</a>
 <br />
 <a href="javascript:Jmol.loadFile(jmolApplet0,'$CC/C=C/CC')">load $CC/C=C/CC (NCI SMILES)</a>
 <br />
 <a href="javascript:Jmol.search(jmolApplet0,':caffeine',';isosurface vdw map mep translucent')">load :caffeine (PubChem, with mep)</a>
 <br /> 
 <a href="javascript:Jmol.loadFile(jmolApplet0,'==HEM')">load ==HEM (RCSB ligand)</a>

</td></tr></table>
</td>
</tr></table>
</body>
</html>
